<template>
    <div class="purchase-container">
        <!-- 采购单头 -->
        <el-card class="header-card">
            <el-form :inline="true">
                <el-form-item label="采购单号">
                    <el-input v-model="order.orderNo" disabled />
                </el-form-item>
                <el-form-item label="供应商" prop="supplier">
                    <el-select v-model="order.supplier" style="width: 200px">
                        <el-option v-for="s in suppliers" :key="s" :label="s" :value="s" />
                    </el-select>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 采购明细 -->
        <el-card class="detail-card">
            <template #header>
                <div class="flex-between">
                    <span>采购明细</span>
                    <el-button @click="addItem">添加药品</el-button>
                </div>
            </template>

            <el-table :data="order.details" border>
                <el-table-column width="300">
                    <template #header>
                        <div class="flex-between">
                            <span>药品信息</span>
                            <el-button type="danger" size="small" @click="clearAll">清空</el-button>
                        </div>
                    </template>
                    <template #default="{ row, $index }">
                        <el-select v-model="row.MedicineId" filterable placeholder="搜索药品" @change="updateMedicine(row)">
                            <el-option v-for="m in medicines" :key="m.Id" :label="`${m.Name} (${m.Manufacturer})`"
                                :value="m.Id" />
                        </el-select>
                    </template>
                </el-table-column>

                <el-table-column label="单价" width="150">
                    <template #default="{ row }">
                        <el-input-number v-model="row.UnitPrice" :min="0.01" :precision="2" />
                    </template>
                </el-table-column>

                <el-table-column label="数量" width="150">
                    <template #default="{ row }">
                        <el-input-number v-model="row.Quantity" :min="1" :step="10" />
                    </template>
                </el-table-column>

                <el-table-column label="小计" width="150">
                    <template #default="{ row }">
                        {{ (row.UnitPrice * row.Quantity).toFixed(2) }}
                    </template>
                </el-table-column>

                <el-table-column width="80">
                    <template #default="{ $index }">
                        <el-button type="danger" icon="Delete" circle @click="removeItem($index)" />
                    </template>
                </el-table-column>
            </el-table>

            <div class="total-amount">
                总金额：¥ {{ totalAmount.toFixed(2) }}
            </div>
        </el-card>

        <div class="action-bar">
            <el-button type="primary" @click="submit">提交</el-button>
            <el-button @click="reset">重置</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'

// 硬编码数据
const medicines = ref([
    {
        Id: 1,
        Name: '阿莫西林胶囊',
        BatchNumber: '20231101-001',
        Manufacturer: '华北制药',
        UnitPrice: 25.50,
        Stock: 100,
        Unit: '盒',
        ExpiryDate: '2025-12-31'
    },
    {
        Id: 2,
        Name: '布洛芬缓释片',
        BatchNumber: '20231102-002',
        Manufacturer: '上海医药',
        UnitPrice: 18.90,
        Stock: 50,
        Unit: '盒',
        ExpiryDate: '2024-06-30'
    }
])

const suppliers = ref(['华东医药公司', '华南药品批发', '国药控股'])

// 采购单数据
const order = reactive({
    orderNo: `PO${Date.now().toString().slice(-6)}`,
    supplier: '',
    details: []
})

// 计算总金额
const totalAmount = computed(() => {
    return order.details.reduce((sum, item) => sum + (item.UnitPrice * item.Quantity), 0)
})

// 操作方法
const addItem = () => {
    order.details.push({
        MedicineId: null,
        UnitPrice: 0,
        Quantity: 1,
        Medicine: null
    })
}

const removeItem = (index) => {
    order.details.splice(index, 1)
}

const updateMedicine = (row) => {
    const medicine = medicines.value.find(m => m.Id === row.MedicineId)
    if (medicine) {
        row.UnitPrice = medicine.UnitPrice
        row.Medicine = medicine
    }
}

const submit = async () => {
    if (order.details.length === 0) {
        ElMessage.error('请添加采购药品')
        return
    }

    // 模拟API调用
    setTimeout(() => {
        ElMessage.success('采购单提交成功')
        reset()
    }, 1000)
}

const reset = () => {
    order.supplier = ''
    order.details = []
}

const clearAll = () => {
    order.details = []
}
</script>